<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
        }
    </style>
    <script src="./js/animate.js"></script>
</head>
<body>
    <script>
        class fire{
            constructor({x,y=document.documentElement.clientHeight}){
                this.el=document.createElement("div");
                document.body.appendChild(this.el);
                this.el.style.width="10px";
                this.el.style.height="10px";
                this.el.style.borderRadius="50%";
                this.el.style.position="absolute";
                this.el.style.backgroundColor=this.randomColor();
                
                this.el.style.left=x+"px";
                this.el.style.top=y+"px";
            }

            randomColor(){
                var str="";
                str+="rgb("+parseInt(Math.random()*256)+","
                str+=parseInt(Math.random()*256)+","
                str+=parseInt(Math.random()*256)+")"
                return str;
            }
            move(y,callback){
                tools.animate(this.el,{top:y},()=>{
                    this.el.remove();
                    if(callback){
                        callback();
                    }
                })
            }
        }
        class boom{
            constructor({x,y=document.documentElement.clientHeight}){
                this.el=document.createElement("div");
                document.body.appendChild(this.el);
                this.el.style.width="10px";
                this.el.style.height="10px";
                this.el.style.borderRadius="50%";
                this.el.style.position="absolute";
                this.el.style.backgroundColor=this.randomColor();
                
                this.el.style.left=x+"px";
                this.el.style.top=y+"px";
            }

            randomColor(){
                var str="";
                str+="rgb("+parseInt(Math.random()*256)+","
                str+=parseInt(Math.random()*256)+","
                str+=parseInt(Math.random()*256)+")"
                return str;
            }

            move(){
                var mX=Math.random()>0.5?Math.random()*21:Math.random()*21*-1;
                var mY=Math.random()>0.5?Math.random()*21:Math.random()*21*-1;

                this.timer=setInterval(()=>{
                    mY++;
                    this.el.style.left=this.el.offsetLeft+mX+"px";
                    this.el.style.top=this.el.offsetTop+mY+"px";
                    if(this.el.offsetLeft<=0
                    ||this.el.offsetLeft>document.documentElement.clientWidth
                    ||this.el.offsetTop>document.documentElement.clientHeight){
                        this.el.remove();
                        clearInterval(this.timer);
                    }
                },20)
            }
        }


        document.body.onclick=function(evt){
            let e=evt||window.event;

            let disX=e.pageX;
            let disY=e.pageY;
            new fire({x:disX}).move(disY,function(){
                for(var i=0;i<20;i++){
                    new boom({x:disX,y:disY}).move();
                }
            });
        }
    </script>
</body>
</html>